<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { useWindowSize } from '@/utils/useWindowSize'
import * as echarts from 'echarts'
import useAutoPie from '@/utils/useAutoPie/index'
import type { PieIndicator } from '@/types/interface'

const chart = ref()

const options = {
  tooltip: {
    show: false,
    trigger: 'item'
  },
  toolbox: {
    show: false,
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '80%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 0,
        borderColor: '#fff',
        borderWidth: .8
      },
      label: {
        show: false,
        position: 'center'
      },
      color:[
        'rgb(249,217,121)',
        'rgb(108,225,179)',
        'rgb(139,204,238)',
        'rgb(241,168,166)'
      ],
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          lineHeight: 13,
          color: function (param: any) {
            return param.color
          },
          formatter: function (param: any) {
            return param.name + '\n' + param.percent + '%'
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '<30天' },
        { value: 735, name: '30-60天' },
        { value: 580, name: '60-90天' },
        { value: 484, name: '>90天' },
      ]
    }
  ]
};

let myEchart : any = null
onMounted(() => {
  myEchart = echarts.init(chart.value)
  myEchart.setOption(options)
  // 定时播放饼状图
  const { auto } = useAutoPie()
  auto(myEchart,3000,options.series[0].data.length)
})

// 大屏适配尺寸工具
const { reSizeEvent } = useWindowSize()
reSizeEvent(()=>{
  myEchart.resize()
})

// 饼图指示器
const indicatorItems = ref<PieIndicator[]>([
  {
    type: 0,
    title: '<30天',
    color: 'rgb(249,217,121)',
  },
  {
    type: 1,
    title: '30-60天',
    color: 'rgb(108,225,179)',
  },
  {
    type: 2,
    title: '60-90天',
    color: 'rgb(139,204,238)',
  },
  {
    type: 3,
    title: '>90天',
    color: 'rgb(241,168,166)',
  }
])

</script>

<template>
    <div class="full-w">
        <SepTitle title="库龄分布占比">
            <template #main>
                <div class="column-normal main">
                    <div class="r-b shadow-normal">
                      <div ref="chart"  class="r-b ringChart"></div>
                    </div>
                    <div class="pieIndicatorMain">
                      <PieIndicator :indicatorItems="indicatorItems"></PieIndicator>
                    </div>
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.main
    padding-bottom 20px;
    height 150px
    position relative
    
$ringChartLength = 120px
.ringChart 
    width $ringChartLength
    height $ringChartLength
    background-color rgba(64,65,93,1)

.pieIndicatorMain
  position absolute
  bottom 0px
  right 0px

</style>